<template>
  <div>
    <div class="nogoods" v-if="list.length == 0">
      <div class="cont">
        <img src="../assets/img/empty.png" alt="" style="width: 24vw;margin-left: 8.5vw;">
        <p style="color: #333;font-size: 13px;margin-top: 1vw;letter-spacing: 1px;text-align:center;">快去添加你的小宝贝吧~</p>
      </div>
    </div>
    <div v-else style="background: #f5f5f5;padding-top: 4vw;height: 100vh;">
      <pull-to
        :bottom-load-method="infiniteHandler"
        :is-top-bounce=false
        :bottom-config="BOTTOM_DEFAULT_CONFIG"
        class="file-lists">
        <div class="goods"  v-for="(v,index) in list" :key="index">
          <router-link :to="'/detail?type=1&limit_id=0&group_id=0&join_id=0&goods_id='+v.id">
            <img :src=v.thum_img alt="" style="border-radius: 2vw;">
            <div style="width: 100%;height:auto;padding-left: 2vw">
              <p class="scrip" style="color: #333;height: 11.2vw;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">{{v.goods_name}}</p>
              <p class="price">￥{{v.sell_price}}
                <span class="liked">{{v.popularity}}</span><img src="../assets/img/fire.png" alt="" style="margin-top: .5vw;">
              </p>
            </div>
          </router-link>
        </div>
      </pull-to>
      <div class="clear"></div>
    </div>
  </div>

</template>

<script>
  import request from '../request/index'
  import PullTo from 'vue-pull-to'
  export default {
    name: "selectedAds",
    components:{
      PullTo
    },
    data(){
      return{
        list:[],
        page:1,
        BOTTOM_DEFAULT_CONFIG: {
          pullText: "上滑继续加载",
          triggerText: "释放更新",
          loadingText: "加载中,请稍后",
          doneText: "内容已全部展示了",
          failText: "加载失败",
          loadedStayTime: 1000,
          stayDistance: 50,
          triggerDistance: 50,
          list: ""
        },
      }
    },
    methods:{
      infiniteHandler(loaded){
        if(this.page<=this.list.all_count){
          request.loadMoreEnjoy(this,loaded)
        }else{
          this.BOTTOM_DEFAULT_CONFIG.doneText = "内容已全部展示";
          loaded("done");
          this.loaded = true;
        }
      }
    },
    created(){
      request.enjoy(this);

    },
  }
</script>

<style scoped lang="scss">
  .nogoods{
    width: 100vw;
    height: 100vh;
    background:#fff;
    position: relative;
    .cont{
      width: 43vw;
      height: 30vw;
      display: inline-block;
      margin: 0px auto;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      top: -44vw;
    }
  }
  @media screen and (min-width: 320px) and (max-width: 370px){
    .text{
      width: 94% !important;
    }
  }
  .file-lists{
    height: 100vh;
  }
  .text{
    width:82%;
    height:7vw;
    margin: 0px auto;
    img{
      float:left;
      margin-top: 2.7vw;
      width:37%;
      height: .5vw;
    }
    p{
      float: left;
      font-size: 16px;
      color: #ff5230;
      margin-left:2vw;
      margin-right:2vw;
    };
  }
  .goods{
    width:44vw;
    height:auto;
    margin:3vw 0vw 3vw 4vw;
    border-radius: 2vw;
    background: #f5f5f5;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* padding-left: 2vw;*/
    overflow: hidden;
    .price{
      font-size:13px;
      color: #353535;
      .liked{
        font-size: 10px;
        color: #ff4c50;
        float: right;
        margin-right:3vw;
      }
      img{
        width:2.67vw;
        height:3.2vw;
        display: inline-block;
        float: right;

      }
      .oldPrice{
        font-size: 10px;
        color: #888888;
        text-decoration: line-through;
      }
    }
    .hot{
      width:8vw;
      height:4vw;
      background:#ff4c50;
      color: #fff;
      line-height:4vw;
      text-align: center;
      justify-content: center;
      margin-top: 2vw;
      margin-bottom: 2vw;
    }
    .scrop{
      color: #353535;
      font-size: 13px;
      text-align: left;
      margin-bottom: 2vw;
    }
    img{
      width:44vw;
      height:44vw;
      margin-bottom: 2vw;
    }
  }
</style>
